<template>
  <div class="consoleMain">
    <div  class="dashboard-editor-container">
      <div class="console">
        <div class="leftconsole">
          <div class="bg" v-loading="loading">
            <i class="el-icon-refresh-right refreshCountData" @click="restData"></i>
            <div class="Count ">
              <div class="countItem">
                <div class="countName">
                  <svg t="1742280861992" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="14379" width="20" height="20"
                  >
                    <path
                      d="M512 0C229.2224 0 0 229.2224 0 512s229.2224 512 512 512 512-229.2224 512-512S794.7776 0 512 0z m220.3136 748.4416c0 17.5616-11.776 29.3376-29.3376 29.3376H321.1264c-11.776 0-23.552-5.8368-26.4704-17.6128a26.88 26.88 0 0 1 5.7856-32.256l193.8432-208.4864-193.6896-220.3136c-8.8064-8.8064-8.8064-23.552-5.8368-35.328 5.8368-11.7248 14.7456-17.5616 26.4704-17.5616h378.7776c14.7456 0 29.3376 14.7456 29.3376 29.3376v76.3904c0 17.5616-11.776 29.3376-29.3376 29.3376-14.6944 2.9696-26.4704-11.776-26.4704-29.3376v-44.032H388.7104l167.3728 187.904c11.776 11.7248 11.776 29.2864 0 41.0624l-164.4032 179.2h281.9584v-26.4704c0-17.5616 11.776-29.3376 29.3376-29.3376 14.7456 0 29.3376 14.7456 29.3376 29.3376v58.8288z"
                      fill="#10C287" p-id="14380"
                    ></path>
                  </svg>
                  收到留言合计
                </div>
                <div class="countNum">{{ countData.totalThreads }}</div>
              </div>
              <div class="countItem">
                <div class="countName">
                  <svg t="1742280913482" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="15603" width="20" height="20"
                  >
                    <path
                      d="M956.672 459.776L862.72 397.568c-16.64-11.008-24.832-30.976-20.992-50.688l22.272-110.592c4.096-20.736-2.304-42.24-17.152-57.344-15.104-15.104-36.352-21.504-57.344-17.152l-110.592 22.272c-19.712 4.096-39.424-4.352-50.688-20.992L565.76 69.12c-11.776-17.664-31.488-28.16-52.736-28.16s-40.96 10.496-52.736 28.16l-62.464 93.952c-11.008 16.64-30.976 24.832-50.688 20.992l-110.592-22.272c-20.736-4.096-42.24 2.304-57.344 17.152-15.104 15.104-21.504 36.352-17.152 57.344l22.272 110.592c3.84 19.712-4.352 39.424-20.992 50.688l-93.952 62.464c-17.664 11.776-28.16 31.488-28.16 52.736s10.496 40.96 28.16 52.736l93.952 62.464c16.64 11.008 24.832 30.976 20.992 50.688l-22.272 110.592c-4.096 20.736 2.304 42.24 17.152 57.344 15.104 15.104 36.352 21.504 57.344 17.152l110.592-22.272c19.712-4.096 39.424 4.352 50.688 20.992l62.464 93.952c11.776 17.664 31.488 28.16 52.736 28.16s40.96-10.496 52.736-28.16l62.464-93.952c11.008-16.64 30.976-24.832 50.688-20.992l110.592 22.272c20.736 4.096 42.24-2.304 57.344-17.152 15.104-15.104 21.504-36.352 17.152-57.344l-22.272-110.592c-3.84-19.712 4.352-39.424 20.992-50.688l93.952-62.464c17.664-11.776 28.16-31.488 28.16-52.736s-10.496-41.216-28.16-52.992z m-249.344-22.016l-211.456 215.04c-5.888 6.144-13.824 9.216-22.016 9.216-7.168 0-14.592-2.56-20.224-7.68l-138.24-122.112c-12.8-11.264-13.824-30.72-2.816-43.264 11.264-12.8 30.72-13.824 43.264-2.816l116.48 102.912 190.976-194.304c11.776-12.032 31.232-12.288 43.52-0.256 12.288 11.52 12.288 30.976 0.512 43.264z"
                      fill="#5396FF" p-id="15604"
                    ></path>
                  </svg>
                  认证机构合计
                </div>
                <div class="countNum">{{ countData.totalVerifyUser }}</div>
              </div>

              <div class="countItem">
                <div class="countName">
                  <svg t="1742280974111" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="20324" width="20" height="20"
                  >
                    <path
                      d="M969.837714 922.386286H71.113143v-108.251429c0-132.150857 107.117714-239.268571 239.268571-239.268571h391.936c147.748571 0 267.52 119.771429 267.52 267.52v80z"
                      fill="#C2E5FF" p-id="20325"
                    ></path>
                    <path
                      d="M517.010286 513.243429c131.492571 0 238.098286-106.605714 238.098285-238.098286S648.521143 37.046857 517.010286 37.046857s-238.098286 106.605714-238.098286 238.098286 106.605714 238.098286 238.098286 238.098286z m0-69.266286c-93.238857 0-168.832-75.593143-168.832-168.832s75.593143-168.832 168.832-168.832 168.832 75.593143 168.832 168.832-75.574857 168.832-168.832 168.832z m-259.748572 112.566857h519.497143c119.552 0 216.466286 96.914286 216.466286 216.466286v86.582857c0 34.450286-13.677714 67.492571-38.034286 91.830857a129.848686 129.848686 0 0 1-91.830857 38.034286H170.697143c-34.450286 0-67.492571-13.677714-91.830857-38.034286a129.848686 129.848686 0 0 1-38.034286-91.830857v-86.582857c-0.018286-119.570286 96.896-216.466286 216.429714-216.466286z m0 69.266286c-39.04 0-76.470857 15.506286-104.082285 43.117714a147.179886 147.179886 0 0 0-43.117715 104.082286v86.582857c0 16.073143 6.381714 31.488 17.755429 42.861714a60.575086 60.575086 0 0 0 42.861714 17.755429h692.662857c16.073143 0 31.488-6.381714 42.861715-17.755429a60.575086 60.575086 0 0 0 17.755428-42.861714v-86.582857c0-39.04-15.506286-76.470857-43.117714-104.082286a147.179886 147.179886 0 0 0-104.082286-43.117714h-519.497143z m0 0"
                      fill="#4167F7" p-id="20326"
                    ></path>
                  </svg>
                  注册用户合计
                </div>
                <div class="countNum">{{ countData.totalUser }}</div>
              </div>


              <div class="countItem">
                <div class="countName">
                  <svg t="1742281040351" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="24159" width="20" height="20"
                  >
                    <path d="M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z" fill="#FEC43C" p-id="24160"></path>
                    <path
                      d="M1013.76 408.576C965.632 175.104 759.808 0 512 0 229.376 0 0 229.376 0 512c0 123.904 44.032 236.544 116.736 324.608 87.04 48.128 186.368 74.752 292.864 74.752 301.056 0 550.912-217.088 604.16-502.784z"
                      fill="#FFD73A" p-id="24161"
                    ></path>
                    <path
                      d="M204.8 337.92a92.16 92.16 0 1 0 184.32 0 92.16 92.16 0 1 0-184.32 0zM634.88 337.92a92.16 92.16 0 1 0 184.32 0 92.16 92.16 0 1 0-184.32 0zM512 778.24c-134.144 0-245.76-97.28-266.24-225.28-3.072-21.504 13.312-40.96 35.84-40.96h460.8c22.528 0 38.912 19.456 35.84 40.96-20.48 128-132.096 225.28-266.24 225.28z"
                      fill="#873A18" p-id="24162"
                    ></path>
                    <path
                      d="M742.4 512H281.6c-22.528 0-38.912 19.456-35.84 40.96 1.024 7.168 2.048 14.336 4.096 21.504H773.12c2.048-7.168 3.072-14.336 4.096-21.504C781.312 531.456 763.904 512 742.4 512z"
                      fill="#FFFFFF" p-id="24163"
                    ></path>
                    <path
                      d="M587.776 635.904c-30.72 0-58.368 15.36-75.776 38.912-16.384-23.552-44.032-38.912-75.776-38.912-48.128 0-88.064 36.864-92.16 83.968C390.144 756.736 448.512 778.24 512 778.24c63.488 0 121.856-21.504 167.936-58.368-4.096-47.104-44.032-83.968-92.16-83.968z"
                      fill="#F44444" p-id="24164"
                    ></path>
                  </svg>
                  解决问题合计
                </div>
                <div class="countNum">{{ countData.successThreads }}</div>
              </div>

              <div class="countItem">
                <div class="countName">
                  <svg t="1742281221786" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="32590" width="20" height="20"
                  >
                    <path d="M444 136.3L123.8 324.8l3.2 371.5 323.3 183 320.2-188.5-3.2-371.5z" fill="#FFFFFF"
                          p-id="32591"
                    ></path>
                    <path d="M630 287.6l-20.1-11.4-279.7 164.7L333 767l20.1 11.3-2.8-326z" fill="#06F3FF" p-id="32592"
                    ></path>
                    <path
                      d="M746.8 489.8l-8.6 5.2c-4.7 2.9-6.2 9-3.4 13.7 1.9 3.1 5.2 4.8 8.6 4.8 1.8 0 3.5-0.5 5.2-1.4l8.6-5.2c4.7-2.9 6.2-9 3.4-13.7-2.9-4.7-9-6.2-13.8-3.4z"
                      fill="#005BFF" p-id="32593"
                    ></path>
                    <path
                      d="M638.6 534c-1.6-0.9-3.4-1.3-5.2-1.3-4.9 0-9.9 2.6-13 4.6-20.6 13-38 47.5-38 75.2 0 12.2 3.4 21.4 9.1 24.5 6 3.3 14-0.6 18.2-3.3 20.6-13 38-47.5 38-75.2 0-12.2-3.4-21.3-9.1-24.5z m-9.9 50.4l-8.6 5.2c-1.6 1-3.4 1.4-5.2 1.4-3.4 0-6.7-1.7-8.6-4.8-2.9-4.7-1.3-10.9 3.4-13.7l8.6-5.2c4.7-2.9 10.9-1.3 13.7 3.4 3 4.7 1.5 10.9-3.3 13.7z"
                      fill="#E6E6E6" p-id="32594"
                    ></path>
                    <path
                      d="M618.4 567.3l-8.6 5.2c-4.7 2.9-6.2 9-3.4 13.7 1.9 3.1 5.2 4.8 8.6 4.8 1.8 0 3.5-0.5 5.2-1.4l8.6-5.2c4.7-2.9 6.2-9 3.4-13.7-2.9-4.7-9.1-6.3-13.8-3.4z"
                      fill="#E6E6E6" p-id="32595"
                    ></path>
                    <path
                      d="M444 136.3L123.8 324.8l3.2 371.5 323.3 183 320.1-188.5-3.2-371.5-323.2-183zM166.8 672.9L164 347.6l280.3-165.1 71.2 40.3-280.3 165.1 2.8 325.3-71.2-40.3z m262.8 148.7l-76.5-43.3L333 767l-74.9-42.4-2.8-325.3 280.4-165.1 74.2 42 20.1 11.4 77.8 44-281 165.5 2.8 324.5z m40 0L467 519.8l260.7-153.5 2.6 301.7-260.7 153.6z m287.6-314.7l-8.6 5.2c-1.6 1-3.4 1.4-5.2 1.4-3.4 0-6.7-1.7-8.6-4.8-2.9-4.7-1.3-10.9 3.4-13.7l8.6-5.2c4.7-2.9 10.9-1.3 13.7 3.4 2.9 4.7 1.4 10.9-3.3 13.7z"
                      fill="#005BFF" p-id="32596"
                    ></path>
                    <path
                      d="M704 515.6l-8.6 5.2c-4.7 2.9-6.2 9-3.4 13.7 1.9 3.1 5.2 4.8 8.6 4.8 1.8 0 3.5-0.5 5.2-1.4l8.6-5.2c4.7-2.9 6.2-9 3.4-13.7-2.9-4.7-9-6.2-13.8-3.4zM827.2 430.8c-5.5 0-10 4.5-10 10v10c0 5.5 4.5 10 10 10s10-4.5 10-10v-10c0-5.5-4.5-10-10-10zM837.2 390.8c0-5.5-4.5-10-10-10s-10 4.5-10 10v10c0 5.5 4.5 10 10 10s10-4.5 10-10v-10zM837.2 340.8c0-5.5-4.5-10-10-10s-10 4.5-10 10v10c0 5.5 4.5 10 10 10s10-4.5 10-10v-10zM837.2 290.8c0-5.5-4.5-10-10-10s-10 4.5-10 10v10c0 5.5 4.5 10 10 10s10-4.5 10-10v-10zM803.4 467.4c-2.9-4.7-9-6.3-13.7-3.4l-8.6 5.2c-4.7 2.9-6.2 9-3.4 13.7 1.9 3.1 5.2 4.8 8.6 4.8 1.8 0 3.5-0.5 5.2-1.4l8.6-5.2c4.6-2.9 6.1-9 3.3-13.7zM665.3 540.1c-3-10.8-8.9-19.1-17.1-23.6-11.2-6.1-24.8-4.8-38.5 3.9-26.5 16.8-47.3 57.2-47.3 92.1 0 19.9 7.1 35.2 19.5 42 4.6 2.5 9.6 3.8 14.9 3.8 7.5 0 15.6-2.6 23.7-7.7 25.9-16.4 46.4-55.4 47.3-89.7l3.9-2.4c4.7-2.9 6.2-9 3.4-13.7-2.2-3.4-6.1-5.1-9.8-4.7z m-55.6 93.7c-4.2 2.7-12.2 6.6-18.2 3.3-5.7-3.1-9.1-12.3-9.1-24.5 0-27.7 17.4-62.2 38-75.2 3.1-1.9 8.1-4.6 13-4.6 1.8 0 3.6 0.4 5.2 1.3 5.7 3.1 9.1 12.3 9.1 24.5 0 27.7-17.4 62.1-38 75.2z"
                      fill="#005BFF" p-id="32597"
                    ></path>
                    <path
                      d="M891.2 321.7c-5.5 0-10 4.5-10 10v156.4l-81.7 49.3c-4.7 2.9-6.2 9-3.4 13.7 1.9 3.1 5.2 4.8 8.6 4.8 1.8 0 3.5-0.5 5.2-1.4l91.4-55.1V331.7c-0.1-5.5-4.6-10-10.1-10zM817.3 239.6c-0.1 0.4-0.1 0.8-0.1 1.3v10c0 5.5 4.5 10 10 10s10-4.5 10-10v-10c0-0.4 0-0.9-0.1-1.3 23.4-4.6 41-25.3 41-50 0-28.2-22.8-51-51-51s-51 22.8-51 51c0 24.7 17.7 45.4 41.2 50z"
                      fill="#005BFF" p-id="32598"
                    ></path>
                  </svg>
                  群众呼声已服务
                </div>
                <div class="countNum">{{ countData.serveRundays }}<span>天</span></div>
              </div>

            </div>
          </div>
          <div class="bg">
            <div class="titles">常用功能</div>
            <div class="tools">

              <div class="toolsItem" v-for="(item,idx) in tools" v-if="idx<9">

                <!--                //:style="`background: linear-gradient(to bottom, ${toolsColor[idx].s||toolsColor[0].s},${toolsColor[idx].e||toolsColor[0].e});`"-->
                <div class="icon"
                     :style="`background: linear-gradient(to right, ${ toolsColor[idx]?toolsColor[idx].s:toolsColor[0].s},${ toolsColor[idx]?toolsColor[idx].e:toolsColor[0].e})`"
                >
                  <div :class="item.icon" style="color:#fff;font-size:24px;"></div>
                </div>
                <div class="text">{{ item.title }}</div>
              </div>
              <div v-if="!tools || tools.length<=0"
                   style="color: #909399;font-size:14px;height: 64px;display: flex;align-items: center;justify-content: center;width: 100%"
              >暂无常用，你可以在左侧工具栏点<span class="menuStars el-icon-star-off"
                                    style="margin: 0 5px;font-weight: bolder;color:#000"
              ></span>来增加
              </div>

            </div>

          </div>
          <Pvchart />
          <WZchart />
        </div>
        <div class="rightconsole">
          <div class="app-container">
            <EveryDay />
            <newThread />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getUserTools } from '@/api/user'
import { getIndexData } from '@/api/data'
import Pvchart from '@/components/Index/Pvchart'
import WZchart from '@/components/Index/WZchart'
import EveryDay from '@/components/Index/EveryDay'
import newThread from '@/components/Index/newThread'


export default {
  name: 'Dashboard',
  components: {
    Pvchart,
    WZchart,
    EveryDay,
    newThread
  },
  data() {
    return {
      loading: true,
      tools: [],
      countData:{},
      toolsColor: [
        { s: '#e9a912', e: '#cd7209' },
        { s: '#b07df1', e: '#7C3AED' },
        { s: '#32CD32', e: '#006400' },
        { s: '#FFA500', e: '#FF4500' },
        { s: '#FFCCCC', e: '#663333' },
        { s: '#FFCC99', e: '#331100' },
        { s: '#99FFCC', e: '#003311' },
        { s: '#B3D9E6', e: '#333366' },
        { s: '#FFFFB3', e: '#333300' },
        { s: '#80D9FF', e: '#000066' }

      ]
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.getMytools()
    this.getCountData();
  },
  methods: {
    restData(){
      this.loading = true
      getIndexData({cache:1}).then(r=>{
        this.loading = false
        if(r.code==200){
          this.countData = r.data
        }
      })
    },
    getCountData() {
      getIndexData().then(r=>{
        this.loading = false
          if(r.code==200){
            this.countData = r.data
          }
      })
    },
    getMytools() {
      let tools = JSON.parse(localStorage.getItem('Myadmintools'))
      if (tools && tools.length>0) {
        this.tools = tools
      } else {
        getUserTools().then(r => {
          localStorage.setItem('Myadmintools', JSON.stringify(r.data))
          this.tools = r.data
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: "阿里妈妈数黑体 Bold";
  font-weight: 700;
  src: url("//at.alicdn.com/wf/webfont/kuuojQN0J5PZ/9NmWQ2YijPw9.woff2") format("woff2"),
  url("//at.alicdn.com/wf/webfont/kuuojQN0J5PZ/COdNsNC5Raxr.woff") format("woff");
  font-display: swap;
}

.consoleMain {
  padding: 20px;
}

.Count {
  display: flex;
  align-items: center;
  .countItem {
    padding: 10px 0;
    width: calc(100% / 5);
  }

  .countName {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: rgb(68, 68, 68);
    font-size: 14px;

    svg {
      margin-right: 10px;
    }
  }

  .countNum {
    color: #000;
    font-size: 36px;
    font-family: "阿里妈妈数黑体 Bold";
    font-weight: bolder;

    > span {
      color: #999;
      font-size: 12px;
      margin-left: 5px;
    }
  }
}

.console {
  display: flex;
  justify-content: space-between;

  .bg {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
    margin-top: 15px;
    position: relative;
    .refreshCountData{
      position: absolute;
      right:10px;
      top:10px;
      cursor: pointer;
    }
    &:first-child {
      margin: 0;
    }

    .titles {
      color: #000;
      font-weight: bolder;
      font-size: 14px;
    }

    .tools {
      display: flex;
      margin-top: 20px;

      .text {
        margin-top: 7px;
        color: #222;
        font-size: 14px;
        text-align: center;
      }

      .toolsItem {
        margin-right: 60px;
        width:80px;
        height: 64px;
        text-align: center;
      }

      .icon {
        border-radius: 30%;
        display: flex;
        overflow: hidden;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        > div {
          color: #fff;
          font-size: 26px !important;
        }
      }
    }
  }

  .app-container {
    margin: 0;
  }

  .leftconsole {
    width: 70%;
  }

  .rightconsole {
    width: calc(30% - 20px);
  }
}
</style>
